<template>
	<div @touchstart="checkTouchStart" @touchend="checkTouchEnd" style="height: 9rem;" v-if="finalListone.length>0" ref="mScroll">
		<banner style="width:100%; height: 100%; position:relative;">
			<ul class="scroller_list cate_list leftscroll" :style="`width: ${screenWidth}rem`">
				<li v-for="(val,index) in finalListone" :key="index" style="height:100%;"><!--display: flex;flex-flow: column nowrap;align-items:center;-->
					<div style="width: 3rem;height: 3rem;margin: 0 auto;">
						<img style="width: 3rem;height: 100%;" @click='jumpEvent(val)' src="static/image/demo1.png" v-lazy="val.publicityPicture" />
					</div>
					<h3 v-if="val.goodsVO">{{val.goodsVO.goodsName}}</h3><!--goodsname-->
					<p v-if="val.goodsVO"><span class="prices_text">¥<em>{{parseFloat(val.goodsVO.wsPrice || 0).toFixed(2)}}</em></span><!--wsprice-->
						<span v-if="val.goodsVO ">/{{val.goodsVO.goodsUnit}}</span></p><!--goodsunit-->
				</li>
				<!--<div class="see_more" style="padding: 0;" v-if="arraydata.length>3">
					<router-link tag="div" :to="finalListtow?'goodsClassify?code=' + finalListtow:'FoodGoodsClassify?id='+relGroup" style="width: 100%;height: 100%"><img src="static/image/slide.png" style="height: 100%;width: auto"></router-link>
				</div>-->
			</ul>
		</banner>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from "vuex";
	import Banner from '../BannerScroll'
	export default {
		props: {
			finalListone: {
				type: Array,
				default: () => []
			},
			finalListtow: {},
			relGroup:{
				type:String,
				default:"con004"
			}
		},
		data() {
			return {
				top: 0,
				arraydata:[]
			}
		},
		components: {
			Banner
		},
		computed: {
			...mapGetters('xxy', [
				"getscrollTop",
				"getstoptouch"
			]),
			screenWidth() {
				return Number(this.arraydata.length*5) + 1.5;
			}
		},
		methods: {
			...mapMutations('xxy', [
				"setscrollTop",
				"setstoptouch"
			]),
			jumpEvent(item) {
				setTimeout(() => {
					// 跳到商品详情
					this.$router.push({
						path: 'detail?code=' + (item.goodsNo || item.goodsCode)
					})
//					var node = document.getElementById("scrollOuter")
//					this.setscrollTop(node.scrollTop)
//					localStorage.setItem('scrollTop', this.getscrollTop)
					console.log("延迟300ms跳转")
				}, 300);

			},
			checkTouchStart(e) {
				this.setstoptouch(false)
				this.touchStartObj = {
					pageX: e.touches[0].pageX,
					pageY: e.touches[0].pageY
				}
			},
			checkTouchEnd(e) {
//				this.setstoptouch(true)
				/*let pageX = e.changedTouches[0].pageX;
				let pageY = e.changedTouches[0].pageY;
				let _abs = Math.abs;
				if(_abs(this.touchStartObj.pageX - pageX) > _abs(this.touchStartObj.pageY - pageY)) {
					console.log("这是左右滑动，禁止事件冒泡");
					e.stopPropagation();
				}*/

			},
			sexdata(){
				this.arraydata=[]
				let length=this.finalListone.length<6?this.finalListone.length:6
				for(var i=0;i<length;i++){
					this.arraydata.push(this.finalListone[i])
				}
			},
		},
		created() {

		},
		watch:{
			finalListone(){
				this.sexdata()
			}
		},
		mounted() {
			this.sexdata()
		}
	}
</script>

<style>
	.leftscroll{
		padding: 10px 0 15px 15px;
		position: absolute;
		display:block;
	}
	.see_more {
		/*width: 13vw!important;*/
		/*border-radius: 0 !important;*/
		/*	position: absolute;*/
		padding-left: 10px;
		margin-right: 0.5rem;
	}

	.scroller_list .see_more {
		height: 6rem;
		/*float: right !important;*/
		writing-mode: unset;
		background:#fff;
	}

	.iscroll_list {
		height: 10rem ;
	}

	.scroller_list li {
		width: 5rem;
	}

	.scroller_list li img {
		height: 4.5rem;
		width: 4.5rem;
		margin:0rem;
	}
</style>
